<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Test Carousel - Metro 4 :: Popular HTML, CSS and JS library</title>
    <style>
        .slide {
            display: flex!important;
            align-items: center;
            justify-content: center;
        }

        .image-box {
            width: 640px;
            height: 480px;
        }
    </style>
</head>
<body class="m4-cloak">
<div class="container">
    <h1>Carousel test page</h1>

    <div>
        <div class="mt-4 mb-4 bg-light">
            <input type="radio" name="r1" data-role="radio" value="slide" data-caption="slide">
            <input type="radio" name="r1" data-role="radio" value="slide-v" data-caption="slide-v">
            <input type="radio" name="r1" data-role="radio" value="fade" data-caption="fade">
            <input type="radio" name="r1" data-role="radio" value="switch" data-caption="switch">
            <input type="radio" name="r1" data-role="radio" value="zoom" data-caption="zoom">
            <input type="radio" name="r1" data-role="radio" value="swirl" data-caption="swirl" checked>
        </div>
        <div data-role="carousel" data-effect="swirl" data-duration="1000" id="carousel" data-auto-start="true">
            <div class="slide">
                <div data-role="image-box" data-image="../images/1.jpg"></div>
            </div>
            <div class="slide">
                <div data-role="image-box" data-image="../images/2.jpg"></div>
            </div>
            <div class="slide">
                <div data-role="image-box" data-image="../images/3.jpg"></div>
            </div>
        </div>
    </div>

</div>

<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
    $("input[name=r1]").on("click", function(){
        $("#carousel").attr("data-effect", this.value);
    })
</script>
</body>
</html>
